<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App Runner Launch Pad</title>
    <link rel="stylesheet" href="site.css">
</head>
<body>

<header th:replace="base.html :: header"></header>

<main>

    <p>App Runner hosts Java, Node, and Clojure web-apps. After some simple set up, just push changes to
        the app's git repo and it will automatically be built and deployed here.</p>

    <h2>Apps</h2>

    <div class="app-errors" th:if="${not #lists.isEmpty(errors)}">
        <strong>WARNING! Not all apps are listed:</strong>
        <ul>
            <li th:each="error : ${errors}" th:text="${error}">Error!</li>
        </ul>
        <p>See the <a href="/app-runner-home/system">system page</a> for more details.</p>
    </div>


    <div class="app-filter" th:if="${appCount} > 9">
        <input type="search" autofocus placeholder="Filter by name...">
        <p>Showing <strong class="app-count" th:text="${appCount}">0</strong> <span class="apps-text">apps</span>.</p>
    </div>

    <div class="app-container">
        <div class="app-item" th:each="app : ${apps}"
             th:style="@{background: url('screenshots?url={url}');(url=${app.url})}"
             th:data-app-name="${app.name}">
            <div class="links">
                <h2><a href="/" th:href="${app.url}" th:text="${app.name}">app-name</a></h2>
                <a href="/app-name.html" th:href="@{{name}.html(name=${app.name})}">More details &gt;&gt;</a></div>
        </div>
    </div>

    <div th:if="${not #lists.isEmpty(notRunning)}" class="app-container not-running">
        <div class="app-item" th:each="app : ${notRunning}"
             th:style="@{background: url('screenshots?url={url}');(url=${app.url})}"
             th:data-app-name="${app.name}">
            <div class="links">
                <h2 th:text="${app.name}">app-name</h2>
                <a href="/app-name.html" th:href="@{{name}.html(name=${app.name})}">More details &gt;&gt;</a></div>

        </div>
    </div>

</main>

<footer th:replace="base.html :: footer"></footer>

</body>
<script src="home.js"></script>
</html>
